<template>
  <div class="app-container calendar-list-container">

    <div class="filter-container">
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">总充值排行</el-button>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">首次充值排行</el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" prop="id" label="编号" width="140" />
      <el-table-column align="center" prop="channelId" label="渠道ID" width="200" fixed>
        <template slot-scope="scope">
          <span >{{ getChannelName(scope.row.channelId)}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="playerId" label="渠道名称" width="200" />
      <!-- <el-table-column align="center" prop="superId" label="用户靓号" width="100" /> -->
      <el-table-column align="center" prop="playerName" label="总充值金额" width="200" />
      <!-- <el-table-column align="center" prop="level" label="用户等级" width="100" /> -->

      <el-table-column align="center" prop="before" label="首冲金额" width="200" >
        <template slot-scope="scope">
          <span >{{scope.row.before | goldToMoney}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" prop="after" label="变化后金币" width="200" >
        <template slot-scope="scope">
          <span >{{scope.row.after | goldToMoney}}</span>
        </template>
      </el-table-column>-->
      <!--<el-table-column align="center" prop="change" label="变化金币" width="120" >
        <template slot-scope="scope">
          <span >{{scope.row.change | goldToMoney}}</span>
        </template>
      </el-table-column>-->
      <el-table-column align="center" prop="playerId" label="首冲人数" width="100" />
      <!-- <el-table-column align="center" prop="superId" label="用户靓号" width="100" /> -->
      <el-table-column align="center" prop="playerName" label="二充金额" width="200" />
      <el-table-column align="center" prop="playerId" label="二冲人数" width="100" />
      <!-- <el-table-column align="center" prop="superId" label="用户靓号" width="100" /> -->
      <el-table-column align="center" prop="playerName" label="出款金额" width="200" />
      <el-table-column align="center" prop="playerName" label="出款人数" />
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageQuery.page"
                     :page-sizes="[10,20,30, 50]" :page-size="pageQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import { findUserGoldLog} from "@/api/trans";
  import { getChannel } from "@/api/common";
  import { parseTime } from "@/utils";

  export default {
    name: "goldLogTable",
    data() {
      return {
        tableKey: 0,
        list: null,
        listLoading: true,
        totalSize: 0,
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }]
        },
        time: new Date(),
        channelMap: {},
        channels: [],
        pageQuery: {
          page: 1,
          pageSize: 10,
          playerId: undefined,
          superId: undefined,
          time: undefined,
        }
      };
    },
    created() {
      this.findChannelList();
    },
    methods: {
      getChannelName(channelId){
        let remark = '未知渠道';
        if(channelId){
          let channel = this.channelMap[channelId];
          if(channel && channel.channelRemark){
            remark = channel.channelRemark;
          }
        }
        return remark;
      },
      findChannelList(){
        getChannel()
          .then(res =>{
            this.channels = res.map.list;
            console.log(this.channels)
            this.channelMap = {};
            if(this.channels && this.channels.length){
              this.channels.forEach(element => {
                this.channelMap[element.channelId] = element;
              });
            }
            this.findList();
          })
          .catch(()=>{
            this.findList();
          })
      },
      findList() {
        this.listLoading = true;
        this.pageQuery.time = this.time.getTime();
        findUserGoldLog(this.pageQuery)
          .then(res => {
            this.list = res.map.list;
            this.totalSize = res.map.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listLoading = false;
          });
      },
      handleSizeChange(val) {
        this.pageQuery.pageSize = val;
        this.findList();
      },
      handleCurrentChange(val) {
        this.pageQuery.page = val;
        this.findList();
      },
      // 搜索
      handleSearch() {
        this.pageQuery.page = 1;
        this.findList();
      },
    }
  };
</script>
